<template>
    <div class="nodes">
        <div v-if="nodeShow">
            <van-nav-bar :title="$t('ecology.nodeloan')" leftArrow @click-left="_return" :right-text="$t('ecology.record')" @click-right="showRecord"/>
            <div class="nodeMain">
                <div class="offer" v-if="offShow">
                    <img :src="offer" alt="">
                    <p>{{$t('ecology.nodes')}}</p>
                    <div class="btns">
                        <button class="btn" @click="showOff">{{$t('ecology.just_in')}}</button>
                    </div>
                </div>
                    <div class="changes" v-if="offShow">
                        <div class="change">
                    <van-row class="top" type="flex" justify="space-between">
                        <van-col>
                            <p>{{$t('ecology.exch_liet')}}(USDT)</p>
                            <span>{{re_usdt}}</span>
                        </van-col>
                        <van-col>
                        <!-- <p>商城余额</p>
                        <span>{{aat_coin}}</span> -->
                    </van-col>

                    </van-row>
                    </div>
                </div>
                <div class="btnboxs clearfix" v-if="offShow">
                    <div class="btns" @click="showConfirm">{{$t('ecology.exchange')}}</div>
                    <div class="btns" @click="showTrader">{{$t('ecology.exchange_list')}}</div>
                </div>
                <div class="changes" v-if="offsShow">
                    <div class="change">
                        <van-row class="top" type="flex" justify="space-between">
                            <van-col>
                                <p>{{$t('ecology.exch_liet')}}(USDT)</p>
                                <span>{{re_usdt}}</span>
                            </van-col>
                            <van-col>
                                <p>{{$t('ecology.exch_liet')}}(USDT)</p>
                                <span>{{Number(mine.total).toFixed(2)}}</span>
                            </van-col>
                        </van-row>

                        <van-row class="bottom" type="flex" justify="space-between">
                            <van-col>{{$t('node.hadTo')}}</van-col>
                            <van-col>{{$t('node.force')}} {{mine.surplus}} USDT</van-col>
                        </van-row>
                    </div>
                    <div class="btnboxs clearfix">
                        <div class="btns" @click="showConfirm">{{$t('ecology.exchange')}}</div>
                        <div class="btns" @click="showTrader">{{$t('ecology.exchange_list')}}</div>
                    </div>
                    <div class="profit" >
                        <div v-for="(item,index) in profitList" @click="showFit(index)">
                            <p>{{item.name}}</p>
                            <span  >{{Number(item.value).toFixed(2)}}</span>
                        </div>
                    </div>
                    <div class="price">
                        <p>{{$t('ecology.now')}}</p>
                        <!-- <span>{{Number(1/mine.jiage).toFixed(2)}}<span>AAT / USDT</span></p> -->
                        <p>{{Number(mine.jiage).toFixed(4)}}<span>AAT / USDT</span></p>
                    </div>

                    <div class="mybtnlist">
                        <div class="myteam">{{$t('ecology.myteam')}}</div>
                        <div class="teamdetail clearfix">
                            <ul>
                                <li>
                                    <p class="tit">{{$t('ecology.member')}}</p>
                                    <!-- <p class="det">kskaks</p> -->
                                </li>
                                <li>
                                    <p class="tit">{{$t('ecology.buylevel')}}</p>
                                    <!-- <p class="det">铜矿</p> -->
                                </li>
                                <li>
                                    <p class="tit">{{$t('ecology.teaminto')}}</p>
                                    <!-- <p class="det">155000usdt</p> -->
                                </li>
                            </ul>
                        </div>
                        <div v-for="(item,index) in child" class="teamdetaillist clearfix">
                            <p class="det">{{item.uname}}</p>
                            <p class="det">{{item.level}}</p>
                            <p class="det">{{item.childCount}}</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <offer v-if="offerShow" @_return="_returns"></offer>
        <record v-if="recordShow" @_return="_returns"></record>
        <profits v-if="profitShow" @_return="_returns"></profits>
        <supers v-if="superShow" @_return="_returns"></supers>
        <market v-if="marketShow" @_return="_returns"></market>
        <charge_record v-if="tradeShow" @_return="_returns"></charge_record>
        <van-popup v-model="pwdShow" position="bottom" :overlay="true">
            <van-nav-bar :title="$t('pay.title')" leftArrow @click-left="pwdShow = false"/>
            <div class="pwdMain login">
                <van-cell-group>
                    <van-field v-model="payPassword" :placeholder="$t('pay.title')" input-align="center" type="password"
                               maxlength="6"/>
                </van-cell-group>
                <p @click='forgetPwd'>{{$t('common.forget_password')}}？</p>
                <div class="btns">
                    <van-button type="info" @click="submitMove">立即转换</van-button>
                </div>
            </div>
        </van-popup>
        <transition name="bounce">
            <div class="dialog" v-if="signShow">
                <div class="dialogMain">
                    <p class="pay">{{$t('node.transSucc')}}</p>
                    <img :src="coin" alt="">
                    <span>{{$t('node.trans')}}</span>

                    <div class="btns">
                        <button class="btn" @click="getPat">{{$t('common.confirm')}}</button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import offer from '@/components/node/offer'
    import record from '@/components/node/record'
    import profits from '@/components/node/profit'
    import supers from '@/components/node/super'
    import market from '@/components/node/market'
    import charge_record from '@/components/node/charge_record'
    import {Dialog} from 'vant';
    import {Toast} from 'vant';

    export default {
        data() {
            return {
                offer: require('../../assets/offer.png'),
                nodeShow: true,
                offerShow: false,
                offShow: false,
                recordShow: false,
                superShow: false,
                profitShow: false,
                marketShow: false,
                offsShow: false,
                pwdShow: false,
                payPassword: '',
                signShow: false,
                re_usdt: 0.0000,
                tradeShow:false,
                aat_coin:0.0000,
                child:{},
                coin: require('../../assets/coins.png'),
                profitList: [
                    {
                        name: `${this.$t('ecology.staticincome')}`,
                        value: 0.00001
                    },
                    {
                        name: `${this.$t('ecology.dynamicincome')}`,
                        value: 0.00001
                    },
                    {
                        name: `${this.$t('node.tab')[2]}(USDT)`,
                        value: 0.00001
                    }
                ],
                tabList:
                    {
                        title: '转换收益',
                        tip: '转换收益提现',
                        bac: require('../../assets/tab_a.png'),
                        alt: '转换'
                    }
                ,
                mine: {}
            }
        },
        methods: {
            getPat() {
                this.signShow = false
                this._return()
            },
            forgetPwd() {
            },
            _return() {
                this.$emit('_return')
            },
            showOff() {
                this.nodeShow = false
                this.offerShow = true
            },
            _returns() {
                this.nodeShow = true
                this.offerShow = this.recordShow = this.profitShow = this.superShow = this.marketShow = this.offShow = this.offsShow=this.tradeShow = false
                this.getStatus()
            },
            getStatus() {
                this.$api.post('Node/mynode')
                    .then(res => {
                        console.log(res)
                        if (res.detail.status === 0) {
                            this.offsShow = true
                            this.mine = res.detail.data
                            this.profitList[0].value = Number(this.mine.static).toFixed(2)
                            this.profitList[1].value = Number(this.mine.dynamic).toFixed(2)
                            // this.profitList[2].value = Number(this.mine.aat_coin).toFixed(2)
                            this.profitList[2].value = Number(this.mine.yeji).toFixed(2)
                            this.re_usdt = Number(res.detail.data.re_usdt).toFixed(2)
                            this.child=res.detail.data.child
                        } else {
                            this.offShow = true
                            this.re_usdt = Number(res.detail.data.re_usdt).toFixed(2)
                            this.aat_coin=Number(res.detail.data.aat_coin).toFixed(2)
                        }
                    })
            },
            showRecord() {
                this.nodeShow = false
                this.recordShow = true
            },
            showTrader() {
                this.nodeShow = false
                this.tradeShow = true
            },
            showTab(tab) {
                if (tab === 'node') {
                    this.superShow = true
                    this.nodeShow = false
                } else {
                    this.marketShow = true
                    this.nodeShow = false
                }
            },
            showConfirm() {
                if (this.re_usdt > 0) {
                    Dialog.confirm({
                        title: '提示',
                        message: '确认要转换收益[' + this.re_usdt + ']到账户吗？'
                    }).then(() => {
                        this.pwdShow = true
                    }).catch(() => {
                        // on cancel
                    });
                } else {
                    Toast.fail("您暂时没有可以转换的收益")
                }
            },
            showFit(index) {
                if(index!=2&&index!=3){
                this.nodeShow = false
                this.profitShow = true
                }
            },
            submitMove() {
                let param = {
                    level: 500,
                    paypassword: this.payPassword,
                    usdtval: 0.00000,
                    select_id: 1
                }
                this.$api.post('node/doChangeCoinForOE', param)
                    .then(res => {
                        this.pwdShow = false
                        this.payPassword = ''
                        this.signShow = true
                    })
            },
        },
        created() {
            this.getStatus()
        },
        mounted() {
            this.$emit('disappear')
            // this.getAAT();
        },
        components: {
            offer,
            record,
            profits,
            supers,
            market,
            charge_record
        }
    }
</script>

<style lang="stylus" scoped>
    [class*=van-hairline]::after {
        border: none;
    }

    .nodeMain
        width 94%
        margin 0 auto

        .offer
            

            img
                display block
                margin 0 auto
                width 90px
                padding 30px 0 5px
                opacity 0.9

            p
                text-align center
                color #898989
                padding-bottom 10px

            .btn
                width 130px
                height 40px

            .btns
                display flex
                justify-content center
                padding-bottom 23px

        .changes
            .change
                padding 10px
                background: linear-gradient(180deg, #54d8b4, #26c196)
                box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.5);
                border-radius 5px
                .top
                    padding-bottom 10px

                    .van-col
                        p
                            font-size 12px
                            color #115f49

                        span
                            color #fff
                            display block
                            font-size 24px

                        &:last-child
                            span
                                text-align right

                .bottom
                    margin-top 10px
                    padding-bottom 5px

                    .van-col
                        color #FFFFFF
                        font-size 12px


            .profit
                display flex
                justify-content space-between
                flex-flow row wrap
                padding-bottom 10px

                div
                    width 50%
                    margin-top 15px

                    p
                        color #898989
                        font-size 12px

                    span
                        display inline-block
                        margin-top 8px
                        color #DBC8AA
                        font-size 18px


            .price
                background: #fff;
                margin 10px 0
                overflow hidden
                border 1px solid #ebebeb
                p
                    text-align center

                    &:first-child
                        margin-top 25px
                        font-size 12px
                        color #898989

                    &:last-child
                        color #26c196
                        font-size 24px
                        margin-bottom 24px
                        position relative

                        span
                            font-size 12px
                            color #898989
                            position absolute
                            bottom: 5px
                            right 0


            .tab
                border-top 1px solid #404040
                margin-top 10px
                display flex
                justify-content space-between
                overflow hidden

                div
                    width 48%
                    margin-top 10px

                    p
                        color #414141
                        margin-top 10px
                        font-size 16px
                        margin-left 10px

                    span
                        margin-top 3px
                        font-size 12px
                        color #898989
                        padding-bottom 20px
                        display inline-block
                        margin-left 10px

   

    .pwdMain{
        width: 96%;
        margin: 0 auto;
        .van-cell-group{
            border-top: 1px solid #ebebeb;
            border-bottom: 1px solid #ebebeb;
        }
        p{
            text-align: center;
            color: #54d8b4;
            font-size: 12px;
            margin-top: 10px;
        }
        .van-cell{
            color: #54d8b4;
            overflow visible !important
            .van-cell__value{
                color: #FDDEB0;
            }
        }
        .btns{
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            margin-top: 170px;
            padding-bottom 15px
            .van-button{
                width: 100%;
                background:linear-gradient(180deg, #54d8b4, #26c196);
                color #fff;
                border: none;
                /*margin-left: 5%;*/
            }
        }
        .otherbox{
            width 100%
        }
    }

    .dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        /*opacity: 0.4;*/
        z-index: 110;

        .dialogMain {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 72%;
            transform: translateX(-50%) translateY(-50%);

            .pay {
                color #D8D8D8
                font-size 16px
                text-align center

                z-index: 111;
            }

            img {
                width 105px
                margin 20px auto 0
                display block
            }

            span {
                color #898989
                font-size 12px
                margin-top 5px
                display block
                text-align center
            }

            .add {
                font-size 24px
                color #CBAF89
                text-align center
                margin-top 5px
            }

            .btns {
                margin 20px auto 0
                display flex
                justify-content center

                .btn {
                    width 45%
                }
            }
        }
    }
    /* 新加css */
    .btnboxs{width: 100%;box-sizing: border-box;margin-top:.9375rem}
    .btnboxs > .btns{width: 45%;margin-right: 10%;height: 40px;font-size: 14px;float: left;background: linear-gradient(180deg,#ff7541,#f6543e);;color: #414141;line-height: 40px;text-align: center;font-size: 1rem;color #fff}
    .btnboxs > .btns:last-child{margin-right: 0px;background: linear-gradient(180deg,#64b9ff,#2f8edc);;}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .mybtnlist{    border-top: 1px solid #404040;
        margin-top: .625rem;
        display: block;
    justify-content: space-between;
    overflow: hidden;}
    .mybtnlist > .list{}
    .mybtnlist .myteam{margin-top: .1875rem;
        font-size: 1rem;
        color: #898989;
        display:block;
        width: 100%;text-align: center;margin-top:.9375rem;background: linear-gradient(180deg, #54d8b4, #26c196);height:40px;line-height: 40px;color: #414141;margin-bottom: 1rem }
    .teamdetail{width: 100%}
    .teamdetail ul li{width: 33%;float: left;padding-top: 0.5rem;padding-bottom: 0.5rem;text-align: center;border-right: 1px solid #404040}
    .teamdetail ul li:last-child{border-right: none}
    .teamdetail ul li .tit{    color: #898989;
        font-size: 1rem;}
    .teamdetail ul li .det{    display: inline-block;
        margin-top: .5rem;
        color: #dbc8aa;
        font-size: 1.125rem;}
    .teamdetaillist p{width: 33%;float: left;padding-bottom: 0.5rem;text-align: center;border-right: 1px solid #404040;color: #dbc8aa;
        font-size: 1.125rem;line-height: 1.5rem}
    .teamdetaillist p:last-child{border: none}
    .nodeMain .changes .price :first-child {
        margin-top: 0.7625rem  !important;
    }
    .nodeMain .changes .price p:last-child span {
        right: 0.9rem !important;
    }
    .nodeMain .changes .price p:last-child {
        margin-bottom: 1.1rem !important;
    }
    .nodeMain .changes .price p:last-child {
        margin-top: 0.6rem !important;
    }

</style>
